<template>
  <div>
      <transition
      name="custom-classes-transition"
      enter-active-class="animated bounceInLeft"
      leave-active-class="animated bounceOutRight"
      >
        <keep-alive>
          <component v-bind:is="view"></component>
        </keep-alive>
      </transition>
  </div>
</template>

<script>
import HospitalMain from './view/hospital/hospitalMain'
import HospitalA from './view/hospital/hospitalA.vue'
import GovernmentA from './view/government/governmentA.vue'
import IndustryA from './view/industry/industryA.vue'
import WaterA from './view/water/waterA.vue'
export default {
  name: 'screenA',
  data () {
    return {
      msg: 'aaaa',
      ws: null,
      sysId: '0'
    }
  },
  computed: {
    view: function () {
      return 'a-' + this.sysId
    }
  },
  mounted: function () {
    this.receiveSysid()
  },
  methods: {
    receiveSysid: function() {
      var socket = new WebSocket("ws://"+wsaddress+"/vqdisplay/pageswitch/a")
      this.ws = socket;
      socket.onmessage = this.wsOnMessage;
    },
    wsOnMessage: function (e) {
      this.sysId = e.data;
      console.log(e.data)
    }
  },
  components: {
    'a-0':  HospitalMain,
    'a-1':  HospitalA,
    'a-2':  GovernmentA,
    'a-3':  IndustryA,
    'a-4':  WaterA,
  }
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active 在低于 2.1.8 版本中 */ {
  opacity: 0;
}
</style>
